<template>
  <div style="margin:10px">
    <el-card>
      <div slot="header" class="clearfix" style="display:flex;">
        <p style="margin-top:10px;font-size:14px">一体杆名称：</p><el-input v-model="params.poleName" placeholder="请输入一体杆名称" style="width:300px; margin:0 10px" />
        <p style="margin-top:10px;font-size:14px">一体杆编号：</p><el-input v-model="params.poleNumber" placeholder="请输入一体杆编号" style="width:300px;margin:0 10px" />
        <p style="margin-top:10px;font-size:14px"> 运行状态：</p><el-select v-model="params.poleStatus" placeholder="请输入一体杆运行状态" style="width:300px;margin:0 10px">

          <el-option :value="0" label="正常" />
          <el-option :value="1" label="异常" />

        </el-select>
        <el-button type="primary" size="mini" @click="onInquire">查询</el-button>
      </div>
      <el-row>

        <el-button size="mini" type="primary" @click="onAdd('add')">添加一体杆</el-button>
        <el-button size="mini" icon="el-icon-delete" @click="onDels">批量删除</el-button>

      </el-row>
      <!-- 表格 -->
      <el-table :data="list" @row-click="tableList" @selection-change="handleChange">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column label="序号" width="80">
          <template #default="{$index}">
            {{ $index+1 +10*(params.page-1) }}
          </template>
        </el-table-column>
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="一体杆IP" prop="poleIp" />
        <el-table-column label="安装区域" prop="areaName" />
        <el-table-column label="一体杆类型" prop="poleType">
          <template #default="{row}">
            <span v-if="row.poleType==='entrance'">入口</span>
            <span v-else>出口</span>
          </template>
        </el-table-column>
        <el-table-column label="运行状态" prop="poleStatus">
          <template #default="{row}">
            <span v-if="row.poleStatus===0">正常</span>
            <span v-else>异常</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button type="text" @click="onAdd('edit',row.id)">编辑</el-button>
            <el-button type="text" @click="onDel(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin:10px">
        <el-pagination
          :current-page="params.page"
          :page-size="params.pageSize"
          layout="total, prev, pager, next,sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 弹出框 -->
    <add-iece ref="btnRef" :visible.sync="visible" @onSuccess="onLoad" />
  </div>
</template>

<script>
import { delIeceAPI, getListIeceManage } from '@/api/ieceManage'
import addIece from './components/add-iece.vue'
export default {
  components: { addIece },
  data() {
    return { // 复选框存储
      multipleSelection: [],
      // 控制弹出框
      visible: false,
      list: [],
      params: {
        page: 1,
        pageSize: 10,
        poleName: '',
        poleNumber: '',
        poleStatus: ''
      },
      total: 10
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    // 点击批量删除  监听多选框勾选了几个 将监听到的框存储到复选框数组中 点击批量删除调用接口删除所选的多选框内容
    handleChange(val) {
      console.log(val)
      // 筛选 id 因为删除接口要调id
      this.multipleSelection = val.map(item => item.id)
      // console.log(this.multipleSelection)
    },
    async onDels() {
      await this.$confirm('您确定要删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delIeceAPI(this.multipleSelection)
      this.$message.success('删除成功')
      this.onLoad()
    },
    // 点击删除
    async onDel(id) {
      await this.$confirm('是否确认删除当前选中的一体杆?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delIeceAPI(id)
      this.$message.success('删除成功')
      this.onLoad()
    },
    // 表格回填数据方法 根据表格的row-click方法拿取该行的数据 获取子组件的dom 回填数据
    tableList(row, column, event) {
      // console.log(row)
      // console.log(this.$refs.btnRef.formDate)
      this.$refs.btnRef.formDate = {
        poleName: row.poleName,
        poleNumber: row.poleNumber,
        poleIp: row.poleIp,
        areaId: row.areaId,
        poleType: row.poleType,
        id: row.id

      }
    },
    // 点击 判断点击的是编辑还是添加 是编辑需要传id
    onAdd(type, id) {
      if (type === 'add') {
        this.visible = true
      }
      // 如果是编辑 传id
      if (type === 'edit') {
        this.visible = true
        this.$refs.btnRef.formDate.id = id
      }
    },
    // 点击查询
    onInquire() {
      this.onLoad()
    },
    async onLoad() {
      const res = await getListIeceManage(this.params)
      // console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 监听分页
    handleCurrentChange(val) {
      this.params.page = val
      this.onLoad()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.onLoad()
    }

  }
}
</script>

<style>

</style>
